<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'




const value: Ref<string> = ref('')
const searchText: Ref<string[]> = ref(['裤子'])
const hotList: Ref<string[]> = ref([])
const articleList: Ref<string[]> = ref([])

function onClickButton() {

}

</script>



<template>
    <div>
        <div class="topSearch">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>
        </div>

        <!-- 搜索前 -->
        <div class="searchBefore">
            <!-- 搜索记录 -->
            <div class="search-records">
                <div style="display: flex;justify-content: space-between;width: 96%;margin: 0 auto;">
                    <div
                        style="font-size: 14px;color: #999999;text-align: left;display: block;width: 50%;height: 0.2rem;line-height: 0.2rem;">
                        历史记录
                    </div>
                    <div
                        style="font-size: 15px;color: #999999;width: 30%;height: 0.2rem;line-height: 0.2rem;text-align: right;">
                        <van-icon name="delete-o" />
                    </div>
                </div>

            </div>
        </div>

        <!-- 热搜 -->
        <div class="hotSearch">
            <div class="hotSearch-title"><van-icon name="fire" />
                <div>知识热搜</div>
            </div>
            <div class="hotSearch-list">
                <ul>
                    <li>
                    </li>
                </ul>
            </div>
        </div>

    </div>
</template>
<style lang="scss" scoped>
.topSearch {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #CCCCCC;
}

.topSearch>>>.van-search .van-cell {
    padding-right: 15px;
}

.search-records {
    font-size: 14px;
    width: 98%;
    height: auto;
    margin-top: 0.15rem;
}

.searchText {
    width: 90%;
    height: auto;
    margin: 0 auto;
    margin-top: 0.1rem;
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
}

.searchText div {
    font-size: 15px;
    text-align: left;
    height: 0.25rem;
    line-height: 0.14rem;
    width: auto;
    margin-right: 0.1rem;
    background: #dddddd;
    padding: 0.06rem 0.1rem;
    border-radius: 2000px;
    margin-top: 0.1rem;
}

.hotSearch {
    width: 96%;
    height: auto;
    margin: 0 auto;
    margin-top: 0.2rem;
}

.hotSearch-title {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    display: flex;
    justify-content: left;
}

.hotSearch-title>>>.van-icon-fire {
    color: #ff5e5e;
    margin-right: 0.05rem;
    line-height: 0.2rem;
}

.hotSearch-list {
    font-size: 15px;
}

.hotSearch-list ul {
    margin-top: 0.1rem;
}

.hotSearch-list ul li {
    text-align: left;
    margin-top: 0.1rem;
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hotSearch-list>>>.van-icon-stop {
    color: #d66353;
    margin-right: 0.05rem;
}

/* 搜索结果列表 */
.article-list {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.article-top {
    width: 100%;
    height: auto;
}

.article-top>>>.van-tabs__nav {
    background: #f7f7f7;
    width: 100%;
}

.article-top>>>.van-tabs__content {
    font-size: 14px;
    background: #f7f7f7;
    text-align: left;
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.article-con-list {
    width: 100%;
    height: auto;
}

.general-articles:nth-child(1) {
    margin-top: 0.2rem;
}

.general-articles {
    width: 100%;
    height: 1.1rem;
    background: white;
    margin-top: 0.2rem;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    padding: 0.1rem;
}

.general-articles>div:nth-child(1) {
    width: 50%;
    position: relative;
}

.general-articles>div {
    width: 40%;
}

.articles-big-title {
    font-size: 16px;
    font-weight: bold;
    background: white;
    width: 100%;
    height: 0.25rem;
    line-height: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.articles-timeAndName {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    font-size: 13px;
    color: #999999;
}

.articles-timeAndName div:nth-child(1) {
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    line-height: 0.15rem;
}

.articles-timeAndName div:nth-child(2) {
    width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    line-height: 0.15rem;
}

.articles-image {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.articles-image>img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}
</style>
